<template>
<div>
    
    <swiper :options="swiperOption ">
        <!-- 宽度优先 -->
        
        <swiper-slide >
            <img src="../assets/2b1a9f1d025887456fa07a42f87ddfe7.jpeg" class="w-100">
        </swiper-slide>
        <swiper-slide >
            <img src="../assets/36b4c4ce333e4180d237489ad0e977f9.jpeg" class="w-100">
        </swiper-slide>
        <swiper-slide >
            <img src="../assets/56deb330b0920a36a119011c2176ea6f.jpg" class="w-100">
        </swiper-slide>
        <!-- 添加当前位置栏，标准写法 -->
        <div class="swiper-pagination pagination text-right p-x-3 p-b-2" slot="pagination"></div>
    </swiper>
    <!-- 幻灯片结束 -->

    <!-- 图标导航开始-->
    <div class="nav-icon  m-t-3 text-center bg-white p-t-3">
        <!-- 堆叠的话最好不要同时有上下边距，容易出现问题 设置mb3会使最上边的没有边距
        在其父级里面加上pt3使边距平衡-->
        <div class="d-flex flex-warp">
        <div class="nav-icons  m-b-3" v-for="n in 16" :key="n">
            <i class="sprite sprite-news"></i>
            <div class="name p-y-2">爆料</div>
            </div>
            </div>
        <!-- 这里写收起 使用图标和字在水平线上面注重对齐：ai-center[ai是水平线上面的对齐/jc是水平线上面的排列方式] -->
        <div class="nav-s p-y-2 bg-light-1 d-flex jc-center ai-center ">
            <i class="sprite sprite-souqi m-r-1 p-r-1"></i>
            <span>收起</span>
        </div>
        </div>  
    <!-- 图标导航结束 -->

    <!-- 卡片组件开始 -->
    <!-- <div class="card p-3 bg-white  p-"> -->
        <!-- header表示头部  -->
        <!-- <div class="card-header d-flex m-t-3 ai-center p-b-3 header-b">
            <i class="iconfont icon-news m-l-2 m-r-1"></i>
            <div class="fs-xl flex-1">新闻资讯</div>
            <i class="iconfont icon-menu m-r-2"></i>
        </div> -->
        <!-- 分析body可以看出一个导航栏和一个显示框->显示框里面的内容一开始就存在的，不用路由跳转 -->
        <!-- <div class="card-body p-t-4">
            <div class="nav d-flex ai-center jc-between text-center">
                <div tag="div" class="allways-item active " >热门</div>
                <div tag="div" class="allways-item" >新闻</div>
                <div tag="div" class="allways-item" >公告</div>
                <div tag="div" class="allways-item" >活动</div>
                <div tag="div" class="allways-item " >赛事</div>
            </div> -->
            <!-- 显示框的实现用swiper组件实现 -->
            <!-- <swiper class="m-t-3"> -->
                <!-- 逐个swiper 写多少显示多少 -->
                <!-- <swiper-slide> -->
                    <!-- 新闻标题显示在这里 -->
                    <!-- <div v-for="n in 5" :key="n" class="m-b-4 d-flex text-grey fs-lg"> -->
                        <!-- <span>[新闻]</span>
                        <span class="m-x-1">|</span>
                        <span class="flex-1">最新BUG修复进展【老亚瑟的答疑时间】</span>
                        
                        <span>04/19</span>
                    </div>
                </swiper-slide>
                <swiper-slide>1</swiper-slide>
                <swiper-slide>2</swiper-slide>
                <swiper-slide>3</swiper-slide>
                <swiper-slide>4</swiper-slide>
            </swiper>
        </div>
    </div> -->


    <!-- 传props值直接以标签的形式传值 -->
    <!-- :后面直接跟js代码 -->
    <!-- :catagories='herocats'表示传到catagories里面的数据由herocats数组决定，写在data里面 -->
    <m-listcard icon="news" title="新闻资讯" :catagories="newsCats">
        <!-- 这里写插槽数据 -->
        <!-- #item 等同于：name=‘item’绑定插槽  |  ={} 中填写的是是获取的数据,取slot中:category的数据 -->
        <template #items="{category}">
            <!-- 完成新闻资讯样式的自定义化 -->
            <!-- 注意这边的跳转还是在'/'的子路由里面跳转的,所以没有脱出'/'的父路由的显示范围 -->
            <router-link class="m-b-4 d-flex text-grey fs-lg "  v-for="(cates,index) in category.newlist" :key="index"
            tag="div" :to="`/active/${cates._id}`"> 
                <span class="w-s">[{{cates.categoryName}}]</span>
                <span class="m-x-1">|</span>
                <span class="flex-1 text-ellipsis m-r-2">{{cates.name}}</span>
                <span >{{cates.createdAt | date}}</span>
            </router-link>
        </template> 
    </m-listcard>

    <m-listcard icon="hero" title="英雄" :catagories="newsHCats">
        <template #items="{category}">
            <!-- 左右边框有点多可以用负margin把左右收缩一下 -->
            <div class="d-flex flex-warp " style="margin: 0 -0.5rem">
            <!-- 样式：自适应每一行的英雄个数 英雄每个框的大小是不变的 把width设为20%即可实现一行5个英雄-->
            <router-link tag="div" :to="`hero/${i._id}`" v-for="(i,index) in category.newlist" :key="index" class="p-2" style="width:20%">
                <!-- 上面是图片，下面是名字  把width：100%即可实现图片横向填充满20%-->
                <img :src="i.icon" class="w-100">
                <div class="text-center">{{i.name}}</div>
            </router-link></div>
        </template>

    </m-listcard>
    

    
</div>
</template>

<script>
import dayjs from 'dayjs'

export default {
    //局部过滤器
    filters:{
        date(val){
        return dayjs(val).format('MM/DD')
    },},
    data() {
        return {
            //写swiper的位置点必须的参数
            swiperOption:{
                pagination:{
                    el: ".swiper-pagination",
                }
            },
            //动态显示,在创建的时候对数据进行加载
            newsCats:[],
            newsHCats:[]

        }
    },
    methods: {
        async fetchnewCats(){
            //这里不加前缀没关系会自动加
            let res=await this.$http2.get('news/list')
            this.newsCats=res.data
        },
        async fetchnewHeroCats(){
            let res =await this.$http2.get('heroes/list')
            this.newsHCats=res.data
        }
    },
    created() {
        this.fetchnewCats()
        this.fetchnewHeroCats()
    },
}
</script>
<style lang="scss">// scss 的打开方式
/* 改变位置点样式 */
@import '../assets/scss/_variables';
.pagination{
    .swiper-pagination-bullet{              //不选中的颜色
        opacity: 1;                                //透明度 
        border-radius: .1538rem ;
        background-color: #fff;
    &.swiper-pagination-bullet-active{  //选中的颜色
    background-color: rgb(33, 33, 172);
    }
    }
} 
.nav-icon{
    border-top:.0769rem /* 1px -> .0769rem */solid $border-color;
    border-bottom:.0769rem /* 1px -> .0769rem */solid $border-color;

}
.nav-icons{
    //宽度：一行显示4个：25%
    width: 25%;
    border-right: .0769rem /* 1px -> .0769rem */solid $border-color;
    //运用函数->注意写法也为函数形式）把第四个元素边框的颜色变为透明（下标值从1开始，所以到第四个为4）-->注意要表示倍数只能用n  
    &:nth-child(4n){
        border-right: transparent;
    }
}
.sprite-souqi{
    //由于基础的设定已经在spriter里面设定好了所以这个只要详细设定就行了
    background-position: 38.577% 52.3% !important;
    width: .7692rem /* 10px -> .7692rem */;
    height:.7692rem /* 10px -> .7692rem */;

}
.header-b{
    border-bottom:2px solid $border-color;}
</style>